<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
    <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
    <link  href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
    <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
    <link rel="stylesheet" href="css/base.css">
    <script src="js/txx.js" ></script>
    <style>
        .input-centered {
            display: block;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 15px;

        }
        #yzm{
            margin: 0 0 0 0;
            padding:  0 0 0 0;
        }
    </style>

</head>
<body>
<div id="app">
    <my-header></my-header>
    <main class="c900 el-card" style="width: 500px; padding: 30px 50px;">


            <el-input class="input-centered" v-model="input" size="small" style="width: 200px" placeholder="请输入你的邮箱"></el-input>

            <el-input class="input-centered" placeholder="请输入验证码" size="small" style="width: 200px" v-model="input2" show-password ="false"></el-input>

            <el-button class="input-centered" id="y1" @click="send">获取验证码</el-button>
            <el-button class="input-centered" type="success" @click="next">下一步</el-button>

    </main>
</div>

</body>
<script>
    function getQueryParameter(name) {
        var urlParams = new URLSearchParams(window.location.search);
        return urlParams.get(name);
    }

    // 使用函数获取名为'id'的参数
    var dataFromUrl = getQueryParameter('uname');
    console.log(dataFromUrl); // 输出: example
</script>
<script>
 function time(){
     // 假设我们有一个结束时间（以毫秒为单位），这里我们简单地设置为10秒后
     var endTime = Date.now() + 60000; // 10000毫秒 = 10秒

     function updateCountdown() {
         var now = Date.now();
         var distance = endTime - now;

         // 如果距离小于0，说明时间已经到了
         if (distance < 0) {
             clearInterval(countdownInterval);
             document.getElementById('y1').textContent = '时间到!';
             return;
         }

         // 计算时间差（天、小时、分钟、秒）
         var days = Math.floor(distance / (1000 * 60 * 60 * 24));
         var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
         var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
         var seconds = Math.floor((distance % (1000 * 60)) / 1000);

         // 因为我们只需要秒，所以只显示秒
         document.getElementById('y1').textContent = seconds;
     }

     // 每秒更新一次倒计时
     var countdownInterval = setInterval(updateCountdown, 1000);
 }
</script>
<script>
    var v = new Vue({
        el: "#app",
        data: {
            input: '',
            input2: '',
            second:'60',

        },
        methods: {
            send(){
                let p = new URLSearchParams();
                p.append("uname",dataFromUrl);
                p.append("emailReceiver",this.input);
                axios.post("email/sendEmail",p).then(res=>{
                    console.log(res)

                    if(res.data == 1){
                        console.log(this.input);
                        time();
                    }
                })
            },
            next(){
                let p = new URLSearchParams();
                p.append("yzm",this.input2);
                axios.post("email/code",p).then(res=>{
                    console.log(res);
                    if(res.data==1){
                        console.log(this.input2);
                        window.location.href = `/rePassword.html?uname=`+dataFromUrl;
                    }else{

                    }
                })
            }
        }
    })
</script>
</html>